<div class="g-col12 header-menu">
    <div class="logo-name menu-btn">
        <span></span>
        <div class="right-border"></div>
    </div>
    <div class="menu-items" data-bind="foreach: menu().data">
        <div class="g-col2 menu-btn" data-bind="click: $root.currentMenu.bind($root.currentMenu, $data)">
            <div class="left-border"></div>
            <span data-bind="text: menuName"></span>
            <div class="left-border"></div>
        </div>
    </div>
    <div class="user-photo menu-btn">
        <img style="border-radius: 100%;" alt="点击可操作"
             data-bind="click:clickImg, attr: {src: autoConfig.defaultUserAvatar}">
        <ul data-bind="css:'header-ul'">
            <li>
                <span data-bind="css:'icon-exchange'">切换角色</span>
                <ul data-bind="css:'header-role-ul', foreach:userRoles">
                    <li data-bind="id:roleId, click:$parent.chooseRole">
                        <span>
                            <label data-bind="css:$parent.getLabelClassName(roleId)"></label>
                            <span data-bind="text:roleName"></span>
                        </span>
                    </li>
                </ul>
            </li>
            <li>
                <span data-bind="css:'icon-off', click:logout">退出登录</span>
            </li>
        </ul>
    </div>
    <div class="menu-detail menu-btn">
        <span class="icon-th-list-5" data-bind="click: showMenuDetail"></span>
    </div>
    <div class="menu-search menu-btn u-choose width150 ">
        <input type="text" data-bind="event: {keyup: searchMenu}, textInput: searchMenuModel"/>
        <ul class="u-ws-normal" style="max-height: 128px;" data-bind="foreach: searchResultList">
            <li data-bind="text: $data.menuName, click: $parent.clickSearchMenu"></li>
        </ul>
    </div>
</div>
<div class="header-content g-col12">
    <div class="g-col12 menu-down-items" data-bind="foreach: allMenu().data">
        <!-- ko if:menu.menuEntityList && menu.menuEntityList.length>0 -->
        <div class="menu-down-item">
            <div class="menu-content" data-bind="css: bgColor">
                <i data-bind="css: 'menu-icon'+' '+menu.iconName"></i>
                <span data-bind="text: menu.menuName"></span>
                <ul data-bind="foreach: menu.menuEntityList">
                    <!-- ko if: ko.utils.checkMenu($parents[1].allMenu(), $data) -->
                    <li data-bind="click: $parents[1].openMenu">
                        <span data-bind="text: menuName"></span>
                        <i class="icon-star-6" title="收藏"
                           data-bind="css:setCommonMenuColor, click: $parents[1].clickCollection, clickBubble: false"></i>
                    </li>
                    <!-- /ko -->
                </ul>
            </div>
        </div>
        <!-- /ko -->
    </div>
</div>
